<template>      
    <div>
        <div class="footer-before"></div>
        <div class="footer">
            <div class="flex">
                <router-link class="flex-con" active-class="active" tag="div" :to="{path:'home'}">
                    <div class="icon home-icon"></div>
                    <div class="footer-txt">
                        会员首页
                    </div>              
                </router-link>
                <router-link class="flex-con" tag="div" :to="{path:'shop'}" active-class="active">                    
                    <div class="icon shop-icon"></div>
                    <div class="footer-txt">
                    会员商城 
                    </div>
                </router-link>
                <router-link class="flex-con" active-class="active" tag="div" :to="{path:'cart'}">
                    <div class="icon cart-icon"></div>
                    <div class="footer-txt"> 
                    购物车
                    </div>
                </router-link>
                <router-link class="flex-con" tag="div" :to="{path:'bill'}"  active-class="active">
                    <div class="icon bill-icon"></div>
                    <div class="footer-txt">
                    我的订单
                    </div>
                </router-link>
            </div>
        </div>
    </div>
</template>
<script>
export default {};
</script>

<style>
.footer {
  text-align: center;
  height: 1.3067rem;
  background-color: #efefef;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
}
.footer-before {
  height: 1.3067rem;
}
.footer .icon {
  display: inline-block;
  background-size: 100% 100%;
  margin-top: 0.2rem;
  background-repeat: no-repeat;
}
.footer .home-icon {
  width: 0.6267rem;
  height: 0.5733rem;
  background-image: url(../assets/icons/home1.png);
}
.footer .shop-icon {
  width: 0.6667rem;
  height: 0.5733rem;
  background-image: url(../assets/icons/shop1.png);
}
.footer .cart-icon {
  width: 0.6267rem;
  height: 0.5733rem;
  background-image: url(../assets/icons/cart1.png);
}
.footer .bill-icon {
  width: 0.4933rem;
  height: 0.5733rem;
  background-image: url(../assets/icons/bill1.png);
}
.footer-txt {
  padding-top: 0.06rem;
  font-size: 0.2933rem;
  color: #565656;
}
.active .footer-txt {
  color: #28b46b;
}
.active .shop-icon {
  background-image: url(../assets/icons/shop2.png);
} 
</style>

